<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>激励追踪 - 登录</title>
    <link rel="stylesheet" href="login-styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="login-app">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-left">
                <span class="time">9:41</span>
            </div>
            <div class="status-right">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>

        <!-- 登录容器 -->
        <div class="login-container">
            <!-- 背景装饰 -->
            <div class="background-decoration">
                <div class="floating-shapes">
                    <div class="shape shape-1"></div>
                    <div class="shape shape-2"></div>
                    <div class="shape shape-3"></div>
                    <div class="shape shape-4"></div>
                    <div class="shape shape-5"></div>
                </div>
                <div class="gradient-overlay"></div>
            </div>

            <!-- 主要内容 -->
            <div class="login-content">
                <!-- 应用Logo和标题 -->
                <div class="app-branding">
                    <div class="logo-container">
                        <div class="app-logo">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <div class="logo-rings">
                            <div class="ring ring-1"></div>
                            <div class="ring ring-2"></div>
                        </div>
                    </div>
                    <h1 class="app-title">激励追踪</h1>
                    <p class="app-subtitle">让每一天都充满动力</p>
                </div>

                <!-- 登录表单区域 -->
                <div class="login-form-section">
                    <!-- 切换标签 -->
                    <div class="auth-tabs">
                        <button class="auth-tab active" data-tab="login">
                            <span>登录</span>
                        </button>
                        <button class="auth-tab" data-tab="register">
                            <span>注册</span>
                        </button>
                        <div class="tab-indicator"></div>
                    </div>

                    <!-- 登录表单 -->
                    <form class="auth-form" id="login-form">
                        <div class="form-group">
                            <div class="input-wrapper">
                                <div class="input-icon">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <input 
                                    type="email" 
                                    id="login-email" 
                                    placeholder="邮箱地址" 
                                    required
                                    autocomplete="email"
                                >
                                <div class="input-focus-line"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-wrapper">
                                <div class="input-icon">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <input 
                                    type="password" 
                                    id="login-password" 
                                    placeholder="密码" 
                                    required
                                    autocomplete="current-password"
                                >
                                <button type="button" class="password-toggle" aria-label="显示密码">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <div class="input-focus-line"></div>
                            </div>
                        </div>

                        <div class="form-options">
                            <label class="remember-me">
                                <input type="checkbox" id="remember">
                                <span class="checkmark"></span>
                                <span class="label-text">记住我</span>
                            </label>
                            <a href="#" class="forgot-password">忘记密码？</a>
                        </div>

                        <button type="submit" class="auth-button primary">
                            <span class="button-text">登录</span>
                            <div class="button-loader">
                                <div class="spinner"></div>
                            </div>
                        </button>
                    </form>

                    <!-- 注册表单 -->
                    <form class="auth-form hidden" id="register-form">
                        <div class="form-group">
                            <div class="input-wrapper">
                                <div class="input-icon">
                                    <i class="fas fa-user"></i>
                                </div>
                                <input 
                                    type="text" 
                                    id="register-name" 
                                    placeholder="用户名" 
                                    required
                                    autocomplete="name"
                                >
                                <div class="input-focus-line"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-wrapper">
                                <div class="input-icon">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <input 
                                    type="email" 
                                    id="register-email" 
                                    placeholder="邮箱地址" 
                                    required
                                    autocomplete="email"
                                >
                                <div class="input-focus-line"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-wrapper">
                                <div class="input-icon">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <input 
                                    type="password" 
                                    id="register-password" 
                                    placeholder="密码" 
                                    required
                                    autocomplete="new-password"
                                >
                                <button type="button" class="password-toggle" aria-label="显示密码">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <div class="input-focus-line"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-wrapper">
                                <div class="input-icon">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <input 
                                    type="password" 
                                    id="register-confirm-password" 
                                    placeholder="确认密码" 
                                    required
                                    autocomplete="new-password"
                                >
                                <div class="input-focus-line"></div>
                            </div>
                        </div>

                        <div class="form-options">
                            <label class="agree-terms">
                                <input type="checkbox" id="agree-terms" required>
                                <span class="checkmark"></span>
                                <span class="label-text">我同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></span>
                            </label>
                        </div>

                        <button type="submit" class="auth-button primary">
                            <span class="button-text">注册</span>
                            <div class="button-loader">
                                <div class="spinner"></div>
                            </div>
                        </button>
                    </form>
                </div>

                <!-- 分割线 -->
                <div class="divider">
                    <span>或者</span>
                </div>

                <!-- 第三方登录 -->
                <div class="social-login">
                    <button class="social-button wechat">
                        <div class="social-icon">
                            <i class="fab fa-weixin"></i>
                        </div>
                        <span>微信登录</span>
                    </button>

                    <button class="social-button qq">
                        <div class="social-icon">
                            <i class="fab fa-qq"></i>
                        </div>
                        <span>QQ登录</span>
                    </button>

                    <button class="social-button apple">
                        <div class="social-icon">
                            <i class="fab fa-apple"></i>
                        </div>
                        <span>Apple ID</span>
                    </button>
                </div>

                <!-- 快速体验 -->
                <div class="quick-actions">
                    <button class="quick-experience">
                        <i class="fas fa-play"></i>
                        <span>游客体验</span>
                    </button>
                </div>

                <!-- 页脚信息 -->
                <div class="auth-footer">
                    <p class="version-info">版本 1.0.0</p>
                    <div class="footer-links">
                        <a href="#">帮助中心</a>
                        <span class="separator">·</span>
                        <a href="#">联系我们</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 欢迎动画遮罩 -->
        <div class="welcome-overlay" id="welcome-overlay">
            <div class="welcome-content">
                <div class="welcome-logo">
                    <i class="fas fa-rocket"></i>
                </div>
                <h2>欢迎回来！</h2>
                <p>正在为您准备个人数据...</p>
                <div class="welcome-progress">
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                    <div class="progress-text">0%</div>
                </div>
            </div>
        </div>

        <!-- Toast消息 -->
        <div class="toast-container" id="toast-container"></div>
    </div>

    <script src="login-script.js"></script>
</body>
</html>